import '../styles/index.css';
import { FullPage } from "../common/fullPage";


new FullPage({
  id: 'pageContain',
  slideTime: 500,
  effect: {
    transform: {
      translate: 'Y',					 // 'X'|'Y'|'XY'|'none'
      scale: [1, 1],					   // [scalefrom, scaleto]
      rotate: [0, 0]					   // [rotatefrom, rotateto]
    },
    opacity: [1, 1]
  },
  mode: 'touch,wheel',
  easing: 'ease'
})
let showDirection = (function () {
  let tags = document.querySelectorAll('.page3 .introduceDirection');
  let _index = '-1';
  return {
    add: (index) => {
      if (_index === '-1') {
        let classList = tags[parseInt(_index = index) - 1].classList;
        classList.add('active');
        classList.remove('remove');
      }
    },
    remove: () => {
      if (_index !== '-1') {
        let classList = tags[parseInt(_index) - 1].classList;
        classList.remove('active');
        classList.add('remove');
        _index = '-1';
        setTimeout(() => {
          classList.remove('remove');
        }, 1000)
      }
    }
  }
})();
let ClickEvents = {
  tag: e => {
    showDirection.add(e.getAttribute('index'));
  },
  direction: () => {
    showDirection.remove();
  },
  login: (e) => {
    e.style.pointerEvents = "none";
    addAnimation();
    login();
  }

}
function handleClick(e) {
  let target = e.target ? e.target : e.srcElement;
  ClickEvents[target.getAttribute('event')] && ClickEvents[target.getAttribute('event')](target);
  console.log(target.getAttribute('event'));
}
document.addEventListener('touchstart', handleClick);

// 适配电脑
function pcClickLogin() {
  let login_btn = document.querySelector(".login.btn");
  login_btn.addEventListener("click", () => {
    if (window.innerWidth > 1024) {
      login_btn.style.pointerEvents = "none";
      addAnimation();
      login();
    }
  });

}


function loginFocus() {
  let inputs = document.querySelectorAll(".login-box>.input-group>.input-box>input");
  for (let i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener("focus", () => {
      inputs[i].parentElement.children[1].classList.add("login-text-animation")
    })
  }
}
loginFocus();
pcClickLogin();

function login() {
  let id = document.querySelector("#id").value;
  let password = document.querySelector("#password").value;
  new Promise((resolve, rej) => {
    MyAjax.ajax({
      type: "POST",
      data: {
        id: id,
        password: password,
      },
      url: "http://121.4.127.126:3000/api/mob/login-school",
      dataType: "json",
      success: (xhr) => {
        resolve(xhr);
      },
      err: (xhr) => {
        endAnimation("请求失败" + xhr.status);
      }

    })
  }).then((xhr) => {
    return new Promise((resolve, rej) => {
      let data = JSON.parse(xhr.responseText);
      if (!data.status) {
        let token = xhr.getResponseHeader("token");
        localStorage.setItem("token", token);
        resolve(1);


      } else {
        endAnimation(data.msg);
        rej(0);
      }
    });
  }).then((value) => {
    MyAjax.ajax({
      url: "http://121.4.127.126:3000/api/mob/is-apply",
      type: "GET",
      data: {},
      before: (xhr) => {
        xhr.setRequestHeader("token", localStorage.getItem("token"));
      },
      success: (xhr) => {
        let data = JSON.parse(xhr.responseText);
        if (!data.status) {
          if (data.result) {
            window.location = "./result.html";
          } else {
            document.querySelector("#location").click();
          }
        } else if (data.status === 1) {
          alert("用户未登录或登录已过期");
        } else {
          alert("服务器出现异常，请稍后重试");
        }
      }
    })


  }).catch(() => {
    return;
  })
}

function addAnimation() {
  let text = document.querySelector(".login.btn>span");
  let animation = document.querySelector(".btn-box-1");
  text.classList.add("hide");
  animation.classList.remove("hide");
}

function endAnimation(str) {
  let btn = document.querySelector(".login.btn");
  btn.style.pointerEvents = "all";
  let tip = document.querySelector(".tips.err");
  tip.innerHTML = str;
  tip.classList.add("text-show");
  let text = document.querySelector(".login.btn>span");
  let animation = document.querySelector(".btn-box-1");
  text.classList.remove("hide");
  animation.classList.add("hide");
}

class MyAjax {
  static ajax(act) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
          act.success(xhr);
        }
        else {
          act.err(xhr);
        }
      }
    }
    if (act.type == 'GET') {
      for (each in act.data) {
        act.url += act.url.indexOf('?') == -1 ? "?" : "&";
        act.url = act.url + encodeURIComponent(each) + "=" + encodeURIComponent(act.data[each]);
      }
      xhr.open(act.type, act.url, true);
      if (act.before) {
        act.before(xhr);
      }
      xhr.send();
    }
    else if (act.type === 'POST' && act.dataType === "json") {

      xhr.open(act.type, act.url, true);
      if (act.before) {
        act.before(xhr);
      }
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.send(JSON.stringify(act.data));
    }
    else {
      xhr.open(act.type, act.url, true);
      if (act.before) {
        act.before(xhr);
      }
      console.log(act.data);
      xhr.send(act.data);
    }

  }
}

(() => {
  if (localStorage.getItem("token")) {
    MyAjax.ajax({
      url: "http://121.4.127.126:3000/api/mob/is-apply",
      type: "GET",
      data: {},
      before: (xhr) => {
        xhr.setRequestHeader("token", localStorage.getItem("token"));
      },
      success: (xhr) => {
        let data = JSON.parse(xhr.responseText);
        if (!data.status) {
          if (data.result) {
            window.location = "./result.html";
          } else {
            document.querySelector("#location").click();
          }
        } else if (data.status === 1) {

        } else {
          alert("服务器出现异常，请稍后重试");
        }
      }
    })
  }
})();